<template>
  <div class="app-ciname-item">
    <div class="item">
      <div class="title-box">
        <div class="title">
          {{ cinemaItem.nm }}
          <span class="price-box">
            <span class="price">{{ cinemaItem.sellPrice }}</span>
            <span class="q">元起</span>
          </span>
        </div>
        <div class="location-box">
          <div class="flex">{{ cinemaItem.addr }}</div>
          <div class="distance">{{ cinemaItem.distance }}</div>
        </div>
        <div class="label-box">
          <div class="allowRefund" v-if="cinemaItem.tag.allowRefund === 1">退</div>
          <div class="endorse" v-if="cinemaItem.tag.endorse === 1">改签</div>
          <div class="snack" v-if="cinemaItem.tag.snack === 1">小吃</div>
          <div class="vipTag" v-if="cinemaItem.tag.vipTag === 1">折扣卡</div>
          <div class="hallType" v-if="cinemaItem.tag.hallType">杜比全景声厅</div>
          <div class="hallType" v-if="cinemaItem.tag.hallType">巨幕厅</div>
        </div>
        <div
          class="discount-box"
          v-if="cinemaItem.promotion"
        >{{ cinemaItem.promotion.cardPromotionTag }}</div>
        <div class="discount-box" v-if="cinemaItem.showTimes">
          <div>近期场次：</div>
          <div class="title-line">{{ cinemaItem.showTimes }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props: ['cinemaItem'],
};
</script>

<style lang="scss">
.app-ciname-item {
  .item {
    padding: 0.346667rem 0.4rem 0.346667rem 0.4rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    border-bottom: 0.013333rem solid #b0b0b0;

    .title-box {
      .title {
        height: 0.613333rem;
        font-size: 0.426667rem;
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        .price-box {
          padding-top: 0.24rem;
          padding-left: 0.08rem;

          .price {
            font-size: 0.48rem;
            color: #f03d37;
          }

          .q {
            margin-left: 0.08rem;
            font-size: 0.293333rem;
            color: #f03d37;
          }
        }
      }

      .location-box {
        margin-top: 0.16rem;
        font-size: 0.346667rem;
        color: #666;
        display: flex;

        .flex {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .distance {
          margin-left: 0.133333rem;
          width: 1rem;
        }
      }

      .label-box {
        margin-top: 0.106667rem;
        margin-bottom: 0.106667rem;
        overflow: hidden;

        .allowRefund,
        .endorse,
        .hallType {
          width: auto;
          color: #589daf;
          border: 1px solid #589daf;
          display: inline-block;
          padding: 0 0.066667rem;
        }

        .snack,
        .vipTag {
          width: auto;
          color: #f90;
          border: 1px solid #f90;
          display: inline-block;
          padding: 0 0.066667rem;
        }

        div + div {
          margin-left: 0.133333rem;
        }
      }

      .discount-box {
        color: #999;
        margin-bottom: 0.106667rem;
      }

      .discount-box {
        display: flex;
        position: relative;

        div {
          width: 1.6rem;
          font-size: 0.32rem;
          color: #999;
        }

        .title-line {
          width: auto;
          margin-left: 0.373333rem;
          position: relative;
        }

        div + div::before {
          content: "";
          display: block;
          position: absolute;
          height: 0.4rem;
          width: 0.026667rem;
          left: -0.186667rem;
          background: #e1e1e1;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
